<template>
  <view class="home" >
  </view>
</template>
<script>
var barcode = null;
export default {
  data() {
    return {
      name: '将二维码/条码放入框内，即可自动扫描', //要在扫码界面自定义的内容
      tip: '我的二维码',
      flash: false, //是否打开摄像头
      currentWebview: '',
			systemBarHeight: 0,
			screenWidth:0,
    };
  },
  async onLoad(d) {
		const res = uni.getSystemInfoSync()
		this.screenWidth = res.screenWidth;
		this.systemBarHeight = res.statusBarHeight;
    this.initView()
  },
  onBackPress() {
    // #ifdef APP-PLUS
    // 返回时退出全屏
    barcode.close();
    plus.navigator.setFullscreen(false);
    // #endif
  },
  onUnload() {
    plus.navigator.setFullscreen(false);
  },
  methods: {
    initView() {
      // #ifdef APP-PLUS
      var pages = getCurrentPages();
      var page = pages[pages.length - 1];
      plus.navigator.setFullscreen(true); //全屏
      let currentWebview = page.$getAppWebview();
      this.currentWebview = currentWebview
      this.createBarcode(currentWebview); //创建二维码窗口
      this.createView(currentWebview); //创建操作按钮及tips界面
      // #endif
    },
    // 扫码成功回调
    async onmarked(type, result) {
      var text = '未知: ';
      switch (type) {
        case plus.barcode.QR:
          text = 'QR: ';
          break;
        case plus.barcode.EAN13:
          text = 'EAN13: ';
          break;
        case plus.barcode.EAN8:
          text = 'EAN8: ';
          break;
      }
      console.log(type, result, '扫码成功')
    },
    // 创建二维码窗口
    createBarcode(currentWebview) {
      barcode = plus.barcode.create(
				'barcode', 
				[
					plus.barcode.QR,
					plus.barcode.EAN13,
					plus.barcode.EAN8,
					plus.barcode.CODE128,
				], 
				{
					top: '0',
					left: '0',
					width: '100%',
					height: '100%',
					scanbarColor: '#666',
					position: 'static',
					frameColor: '#666',
				});
      barcode.onmarked = this.onmarked;
      barcode.setFlash(this.flash);
      currentWebview.append(barcode);
      barcode.start();
    },
    // 创建操作按钮及tips
    createView(currentWebview) {
      this.createTitle()
			this.createLBMenu()
			this.createRBMenu()
		},
		createTitle(currentWebview) {
			const top = this.systemBarHeight + 6 +'px'
			const backVew = new plus.nativeObj.View(
				'backVew', 
				{
					top: top,
					left: '12px',
					height: '32px',
					width: '32px',
				},
			  [{
			    tag: 'img',
			    id: 'backBar',
			    src: 'static/back.png', // 根据自己的图标修改下面的样式
			    position: {
			      top: '0',
			      left: '0',
			      width: '24px',
			      height: '24px'
			    }
			  }]
			);
			const titleVew = new plus.nativeObj.View(
				'titleVew',
				{
					top: top,
					left: '0',
					width: '100%',
					height: '32px',
				},
				[{
					tag: 'font',
					text: '绑定码',
					textStyles: {
						align: 'center',
						color: '#fff',
						size: '16px',
						verticalAlign: 'middle',
						weight: 'bold',
					}
				}]
			);
			backVew.interceptTouchEvent(true);
			this.currentWebview.append(titleVew);
			this.currentWebview.append(backVew);
			backVew.addEventListener("click", function (e) { //返回按钮
				uni.navigateBack({
			    delta: 1
			  });
			  barcode.close();
			  plus.navigator.setFullscreen(false);
			}, false);
		},
		// 左下角按钮
		createLBMenu() {
			const menu = new plus.nativeObj.View(
				'leftMenu',
				{
					left: '0',
					bottom: '40px',
					width: '92px',
					height: '64px',
				},
				[
					{
						tag: 'rect',
						id: 'sbbhBgm',
						position: {
							width: '44px',
							height: '44px',
							left: '24px',
							top: '0',
						},
						rectStyles: {
							radius: '50%',
						}
					},
					{
						tag: 'img',
						id: 'sbbhIcon', 
						src: 'static/article.png',
						position: {
							top: '8px',
							left: '32px',
							width: '28px',
							height: '28px',
						}
					},
					{
						tag: 'font',
						text: '输入设备编号',
						position: {
							bottom: 0,
							left: 0,
							width: '100%',
							height: '16px',
						},
						textStyles: {
							color: '#ffffff',
							size: 12,
							align: 'center'
						}
					}
				]
			)
			menu.interceptTouchEvent(true);
			menu.addEventListener("click", function (e) { //返回按钮
				console.log('点击输入设备编号');
			}, false);
			this.currentWebview.append(menu)
		},
		// 右下角按钮
		createRBMenu(currentWebview) {
			const menu = new plus.nativeObj.View(
				'album',
				{
					left: this.screenWidth - 92 + 'px',
					bottom: '40px',
					width: '92px',
					height: '64px',
				},
				[
					{
						tag: 'rect',
						id: 'albumBgm',
						position: {
							width: '44px',
							height: '44px',
							top: '0',
							left: '24px',
						},
						rectStyles: {
							radius: '50%',
						}
					},
					{
						tag: 'font',
						text: '相册',
						position: {
							bottom: 0,
							left: 0,
							width: '100%',
							height: '16px',
						},
						textStyles: {
							color: '#ffffff',
							size: 12,
							align: 'center'
						}
					},
					{
						tag: 'img',
						id: 'albumIcon', 
						src: 'static/img.png',
						position: {
							width: '28px',
							height: '28px',
							top: '8px',
							left: '32px',
						}
					},
				]
			)
			menu.setStyle({
				position: 'absolute'
			})
			menu.interceptTouchEvent(true);
			menu.addEventListener("click", function (e) { //返回按钮
				console.log('点击相册');
			}, false);
			this.currentWebview.append(menu)
		}
	},
};
</script>
 
<style lang="scss" scoped>
.home {
	background-color: #000;
	width: 100%;
}
</style>
